{% extends "my/layout.html" %}
{% block my %}
<div class="container">
    <h3>修改密码</h3>
    <hr>


    <form action="" class="form-horizontal " method="post">
        <div class="fieldset">
            {% if error %}
            <div class="label-danger">{{error}}</div>
            {% endif %}

            {% if info %}
            <div class="label-info">{{info}}</div>
            {% endif %}
        </div>


        <div class="form-group">
            <label for="origin" class="col-xs-3 control-label">旧密码:</label>
            <div class="col-xs-5">
            <input type="password" class="form-control" id="origin" name="origin" placeholder="旧密码">
            </div>
        </div>
        <div class="form-group">
            <label for="password" class="col-xs-3 control-label">新密码:</label>
            <div class="col-xs-5">
            <input type="password" class="form-control" id="password" name="password" placeholder="新密码">
            </div>
        </div>
        <div class="form-group">
            <label for="password1" class="col-xs-3  control-label">重复密码:</label>
            <div class="col-xs-5">
            <input type="password" class="form-control" id="password1" name="password1" placeholder="重复密码">
            </div>
            <span id="error-tip" class="label-danger hidden"></span>
        </div>
        <div class="form-group">
            <div class="col-xs-3 col-xs-offset-3">
            <button class="btn btn-success">修改</button>

            </div>
        </div>
    </form>
</div>
{% endblock%}

{% block script %}
<script type="text/javascript">
    $(function () {
        var check = function (password, password1, callback) {
            if (password.length === 0 || password1.length === 0) {
                callback('');
            } else if (password != password1) {
                callback("密码不一致")
            } else {
                callback('');
            }
        };

        var info = function (data) {
            if (data.length !== 0) {
                $("#error-tip").val(data).show();
            } else {
                $("#error-tip").hide();
            }
        };

        $("#password").onblur(function () {
            var password = $("#password").val();
            var password1 = $("#password1").val();
            check(password, password1, info);
        });

        $("#password1").onblur(function () {
            var password = $("#password").val();
            var password1 = $("#password1").val();
            check(password, password1, info);
        });
    })
</script>
{% endblock %}